<template>
  <div class="wrapper">
    <Topcard :menu="menu" :current-page="currentPage" />
  </div>
  <div class="wrapper">
    <GoodsCard v-if="currentPage === '1'" />
    <CustomsCard v-else-if="currentPage === '2'" />
    <OrdersCard v-else-if="currentPage === '3'" />
    <CountCard v-else-if="currentPage === '4'" />
    <UserCard v-else-if="currentPage === '5'" />
    <SettingCard v-else />
  </div>
</template>

<script setup>
// import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import Topcard from '@/views/manage/Topcard.vue'
import GoodsCard from '@/views/manage/goodsCard/index.vue'
import CustomsCard from '@/views/manage/customCard/index.vue'
import OrdersCard from '@/views/manage/orderCard/index.vue'
import CountCard from '@/views/manage/countCard/index.vue'
import UserCard from '@/views/manage/userCard/index.vue'
import SettingCard from '@/views/manage/settingCard/index.vue'

const menu = [
  { id: 1, name: '商品管理', path: '/manage/1' },
  { id: 2, name: '客户管理', path: '/manage/2' },
  { id: 3, name: '订单管理', path: '/manage/3' },
  { id: 4, name: '盘点统计', path: '/manage/4' },
  { id: 5, name: '用户管理', path: '/manage/5' },
  { id: 6, name: '后台设置', path: '/manage/6' }
]
const route = useRoute()
const currentPage = route.params.id
</script>

<style lang="scss" scoped>
.wrapper {
  margin: 2rem;
  background: #fff;
  border-radius: 1rem;
}
.search {
  margin: 2rem;
  background: #fff;
  padding-top: 1.8rem;
  border-radius: 1rem;
  .el-form {
    display: flex;
    margin: 0 1.8rem;
    &-item {
      margin-right: 3rem;
      .el-select {
        width: 15rem;
      }
    }
  }
}
.table-wrapper {
  margin: 2rem;
  background: #fff;
  border-radius: 1rem;
  .el-table {
    padding: 1.8rem;
    border-radius: 1rem;
  }
}
.table-header {
  display: flex;
  justify-content: space-between;
}
.ml-5 {
  margin-left: 0.5rem;
}
.btn-control {
  display: flex;
  justify-content: center;
}
.pagination {
  display: flex;
  margin: 1.8rem;
  padding: 0 1.8rem;
  justify-content: flex-end;
}
</style>
